<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 组织架构的头部 -->
      <el-card class="tree-card">
        <div slot="header" class="clearfix">
          <el-tabs v-model="activeName">
            <el-tab-pane label="组织导航" name="first" class="tab-pane">
              <!-- 结构内容 -->
              <TreeTools @addDepm="showDialog" :treeData="headDate" :isRoot="isRoot" />
              <el-tree class="departments-tree" :data="treeData" :props="defaultProps" :default-expand-all="true">
                <TreeTools @addDepm="showDialog" @updateDepm="enitDepts" slot-scope="{data}" :treeData="data"
                  @delDpm="getDepartmets" />
              </el-tree>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-card>
      <DeparmentFrom :isEdit="isEdit" ref="departemt" @addpartment=" " v-if="dialogFormVisible"
        @shutDown="dialogFormVisible = false" v-model="dialogFormVisible" :dopartment="dopartment"></DeparmentFrom>
    </div>
  </div>
</template>

<script>
  import TreeTools from './components/tree-Tools.vue'
  import { getDepartmentListAPI } from '@/api'
  import { transTree } from '@/utils/index'
  import DeparmentFrom from './components/department-From.vue'
  export default {
    name: 'Departments',
    data () {
      return {
        activeName: 'first',
        isRoot: true,
        headDate: {},
        treeData: [],
        // 定义结构显示
        defaultProps: {
          children: 'children',
          label: 'departName'
        },
        dialogFormVisible: false,
        dopartment: {},
        isEdit: false
      };
    },
    components: { TreeTools, DeparmentFrom },
    async created () {
      this.getDepartmets()
    },
    methods: {
      async getDepartmets () {
        const resylt = await getDepartmentListAPI()
        this.headDate = { name: resylt.companyName, manager: '负责人', id: '' }
        // 首次rootValue为空，因为根节点没有pid
        this.treeData = transTree(resylt.depts, '')
      },
      showDialog (treeData) {
        this.isEdit = false
        this.dialogFormVisible = true
        this.dopartment = treeData
      },
      enitDepts (treeData) {
        this.dialogFormVisible = true
        this.dopartment = treeData
        this.isEdit = true
        this.$nextTick(async () => {
          await this.$refs.departemt.getDepartments(treeData.id)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tree-card {
    padding: 30px 140px;
    font-size: 14px;

    .departments-title {
      margin-top: 7px;
    }
  }

  .departments-tree {
    margin: 12px 0;
  }
</style>